<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>	
	<title>Plotr Bar Example</title>
	<script src="../lib/prototype/prototype.js" type="text/javascript"></script>
	<script src="../lib/plotr/excanvas.js" type="text/javascript"></script>
	<script src="../lib/plotr/Plotr.js" type="text/javascript"></script>
	<style type="text/css">
		body{font-size:11px;font-family:"Lucida Grande",Arial,sans-serif;color:#6d6d6d;background:#acc95f; width: 600px; margin:10px auto; text-align:center;}
		a:link,a:visited{text-decoration:none;color:#4c4c4c;font-weight:700;}
		a:hover,a:focus{text-decoration:underline;color:#6a6a6a;}
		#footer{}
	</style>
</head>
<body>
	<div><canvas id="plotr" height="300" width="600"></canvas></div>
	
	<script type="text/javascript">
	//our sample dataset
	var dataset = {
		'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
		'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
		'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
		'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
	};
	
	//some basic options
	var options = {
		padding: {left: 30, right: 0, top: 10, bottom: 30},
		backgroundColor: '#dbdbdb',
		colorScheme: 'blue',
	   	xTicks: [{v:0, label:'day 1'}, 
	      	{v:1, label:'day 2'}, 
	      	{v:2, label:'day 3'},
	      	{v:3, label:'day 4'},
	      	{v:4, label:'day 5'}
		]
	};
	
	//initialize a new LineChart with the options specified above
	var line = new Plotr.LineChart('plotr',options);
	//add the dataset
	line.addDataset(dataset);
	//render the linechart in the canvas element with ID 'plotr'
	line.render();
	</script>
	<div id="footer">&copy; 2007 <a href="http://www.solutoire.com">solutoire.com</a></div>
</body>
</html>